{% block sw_flow_rule_modal %}
<sw-modal
    class="sw-flow-rule-modal"
    variant="large"
    :title="modalTitle"
    :is-loading="isLoading"
    :closable="false"
    @modal-close="onClose"
>
    {% block sw_flow_rule_modal_tabs %}
    <sw-tabs
        default-item="detail"
        position-identifier="sw-flow-rule-modal"
    >
        {% block sw_flow_rule_headers %}
        <template #default="{ active }">
            {% block sw_flow_rule_modal_tab_detail %}
            <sw-tabs-item
                class="sw-flow-rule-modal__tab-detail"
                v-bind="$props"
                name="detail"
                :active-tab="active"
            >
                {{ $tc('sw-flow.modals.rule.tabDetail') }}
            </sw-tabs-item>
            {% endblock %}

            {% block sw_flow_rule_modal_tab_rule %}
            <sw-tabs-item
                class="sw-flow-rule-modal__tab-rule"
                v-bind="$props"
                name="rule"
                :active-tab="active"
            >
                {{ $tc('sw-flow.modals.rule.tabRule') }}
            </sw-tabs-item>
            {% endblock %}
        </template>
        {% endblock %}

        {% block sw_flow_rule_modal_content %}
        <template #content="{ active }">
            <div class="sw-flow-rule-modal__content">
                {% block sw_flow_rule_modal_tab_detail_content %}
                <template v-if="active === 'detail' && rule">
                    <sw-container
                        columns="2fr 1fr"
                        gap="0px 32px"
                    >
                        {% block sw_flow_rule_modal_detail_name %}

                        <mt-text-field
                            v-model="rule.name"
                            name="sw-field--rule-name"
                            class="sw-flow-rule-modal__name"
                            required
                            :label="$tc('sw-flow.modals.rule.labelName')"
                            :placeholder="$tc('sw-flow.modals.rule.placeholderName')"
                            :error="ruleNameError"
                        />
                        {% endblock %}

                        {% block sw_flow_rule_modal_detail_priority %}
                        <mt-number-field
                            v-model="rule.priority"
                            class="sw-flow-rule-modal__priority"
                            name="sw-field--rule-priority"
                            required
                            number-type="int"
                            :label="$tc('sw-flow.modals.rule.labelPriority')"
                            :placeholder="$tc('sw-flow.modals.rule.placeholderPriority')"
                            :error="rulePriorityError"
                            :step="1"
                            :min="0"
                        />
                    {% endblock %}
                    </sw-container>

                    {% block sw_flow_rule_modal_detail_description %}
                    <mt-textarea
                        v-model="rule.description"
                        name="sw-field--rule-description"
                        class="sw-flow-rule-modal__description"
                        :label="$tc('sw-flow.modals.rule.labelDescription')"
                        :placeholder="$tc('sw-flow.modals.rule.placeholderDescription')"
                    />
                    {% endblock %}

                    {% block sw_flow_rule_modal_detail_type %}
                    <sw-multi-select
                        v-model:value="moduleTypes"
                        name="sw-field--moduleTypes"
                        class="sw-flow-rule-modal__type"
                        value-property="id"
                        label-property="name"
                        :label="$tc('sw-flow.modals.rule.labelType')"
                        :placeholder="$tc('sw-flow.modals.rule.placeholderType')"
                        :options="availableModuleTypes"
                    >
                        <template #selection-label-property="{ item }">
                            {{ $tc(item.name) }}
                        </template>

                        <template #result-label-property="{ item }">
                            {{ $tc(item.name) }}
                        </template>
                    </sw-multi-select>
                    {% endblock %}
                </template>
                {% endblock %}

                {% block sw_flow_rule_modal_tab_rule_content %}
                <div v-show="active === 'rule'">
                    {% block sw_flow_rule_modal_conditions_card %}
                    <sw-condition-tree
                        v-if="conditionRepository"
                        class="sw-flow-rule-modal__rule"
                        association-field="ruleId"
                        :initial-conditions="conditions"
                        :condition-repository="conditionRepository"
                        :condition-data-provider-service="ruleConditionDataProviderService"
                        :association-value="rule.id"
                        :association-entity="rule"
                        :root-condition="null"
                        @conditions-changed="onConditionsChanged"
                    />
                    {% endblock %}
                </div>
                {% endblock %}
            </div>
        </template>
        {% endblock %}
    </sw-tabs>
    {% endblock %}

    <template #modal-footer>
        {% block sw_flow_rule_modal_footer_cancel_button %}
        <mt-button
            class="sw-flow-rule-modal__cancel-button"
            size="small"
            variant="secondary"
            @click="onClose"
        >
            {{ $tc('global.default.cancel') }}
        </mt-button>
        {% endblock %}

        {% block sw_flow_rule_modal_footer_save_button %}
        <sw-button-process
            class="sw-flow-rule-modal__save-button"
            variant="primary"
            size="small"
            :is-loading="isSaveLoading"
            :process-success="isSaveSuccessful"
            @click="onSaveRule"
        >
            {{ $tc('sw-flow.modals.rule.buttonAddRule') }}
        </sw-button-process>
        {% endblock %}
    </template>
</sw-modal>
{% endblock %}
